<template>
	<view class="container">
		<span class="title">个人信息编辑</span>
		<view class="list">
			<view class="select avator">
				<span> <img class='icon' src="@/assets/img/avator.png" alt="">头像</span>
				<imgUpload :max="1" :chooseNum="1" :action="`${uploadUrl}${state}/`" v-model="personInfo.headImage"
					@uploadSuccess="uploadSuccess" @uploadFail="uploadFail" @imgDelete="imgDelete"
					:headers="{'Authorization':token}">
				</imgUpload>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/nickname.png" alt="">昵称</span>
				<input class="uni-input" maxlength="6" v-model="personInfo.nickname" placeholder="请输入昵称,不得包含数字" />
			</view>

			<!-- 	<view class="select">
				<span><img class='icon' src="@/assets/img/emotion.png" alt="">脱单要求</span>
				<picker mode="selector" :value="personInfo.requirement" :range="local.honestIndex"
					@change="selectRequirement">
					<view class="uni-input">{{personInfo.requirement}}</view>
				</picker>
			</view> -->
			<view class="select">
				<span><img class='icon' src="@/assets/img/sex.png" alt="">性别</span>
				<picker mode="selector" :value="personInfo.sex" :range="local.sex" @change="selectSex">
					<view class="uni-input">{{local.sex[personInfo.sex]||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/age.png" alt="">年龄（出生年月）</span>
				<picker mode="date" :key="dateKey" :value="personInfo.birthday" @change="selectBirthday">
					<view class="uni-input">{{personInfo.birthday||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/education.png" alt="">学历</span>
				<picker mode="selector" :value="personInfo.education" range-key="name" :range="local.education"
					@change="selectEducation">
					<view class="uni-input">{{(personInfo.education&&local.education[personInfo.education].name)||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/constellation.png" alt="">星座</span>
				<picker mode="selector" :value="personInfo.constellationKey" :range="local.constellation"
					@change="selectConstellation">
					<view class="uni-input">{{personInfo.constellation||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/height.png" alt="">身高</span>
				<input class="uni-input" maxlength="3" type="number" v-model="personInfo.height"
					placeholder="请输入身高" />CM
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/weight.png" alt="">体重</span>
				<input class="uni-input" maxlength="3" type="number" v-model="personInfo.weight"
					placeholder="请输入体重" />KG
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/emotion.png" alt="">情感状况</span>
				<picker mode="selector" :value="personInfo.emotion" range-key="name" :range="local.emotion"
					@change="selectEmotion">
					<view class="uni-input">{{(personInfo.emotion&&local.emotion[personInfo.emotion].name)||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/contact.png" alt="">联系方式</span>
				<input class="uni-input" v-model="personInfo.wechatNum" placeholder="请输入联系方式" />
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/sex.png" alt="">是否公开联系方式<uni-icons type="help" color="#6a6a6a"
						@click="showDesc" size="20"></uni-icons></span>
				<picker mode="selector" :value="personInfo.publicContact" :range="local.contact"
					@change="selectContact">
					<view class="uni-input">{{local.contact[personInfo.publicContact]||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/car.png" alt="">车辆情况</span>
				<picker mode="selector" :value="personInfo.car" :range="local.car" @change="selectCar">
					<view class="uni-input">{{local.car[personInfo.car]||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/house.png" alt="">住房情况</span>
				<picker mode="selector" :value="personInfo.house" :range="local.house"
					@change="(val)=>selectChange(val,'house')">
					<view class="uni-input">{{local.house[personInfo.house]||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/job.png" alt="">职业</span>
				<input class="uni-input" maxlength="10" v-model="personInfo.occupation" placeholder="请输入职业" />
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/salary.png" alt="">收入</span>
				<input class="uni-input" maxlength="4" v-model="personInfo.annualIncome" placeholder="请输入您的年薪" />万元
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/family.png" alt="">家庭情况</span>
				<input class="uni-input" v-model="personInfo.family" placeholder="请输入家庭成员数量" />
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/hometown.png" alt="">籍贯</span>
				<pick-regions :defaultRegion="personInfo.defaultRegionCode" @getRegion="handleGetRegion">
					<span>{{personInfo.hometown||'请选择'}}</span>
				</pick-regions>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/address.png" alt="">居住地</span>
				<pick-regions :onlyShanDong="true" :defaultRegion="personInfo.defaultAddressCode" @getRegion="handleGetAddress">
					<span>{{personInfo.address||'请选择'}}</span>
				</pick-regions>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/hobby.png" alt="">兴趣</span>
				<input class="uni-input" maxlength="20" v-model="personInfo.hobby" placeholder="请输入您的兴趣" />
			</view>
			<view class="desc">
				<span><img class='icon' src="@/assets/img/desc.png" alt="">个人简介</span>
				<view class="uni-textarea">
					<textarea class="textarea" v-model="personInfo.introduction"
						placeholder="缘分都是上天注定的,与你有缘的人,相爱一生;与你无 缘的人,只走一程." />
				</view>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="error" cancelText="否" confirmText="是" title="信息确认"
					content="您已确定了解平台使用规则，提交资料后将会默认授权您的基本信息和公开相册在本平台对外展示，可供其他用户查看。您的联系方式和私密相册仅在您授权后可对心动对象展示。"
					@confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
		<button type="primary" @click="submit" class="submit">提交</button>
	</view>
</template>

<script>
	import {
		localData,
		localCar,
		localHouse
	} from '@/pages/tabBar/Discover/data.js';
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	import pickRegion from '@/components/pick-regions/pick-regions.vue'
	import imgUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	const local = {
		sex: ['男', '女'],
		contact: ['申请', '公开'],
		constellation: ['水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'],
		education: localData[2].submenu,
		car: localCar,
		house: localHouse,
		emotion: localData[3].submenu,
		height: [],
		weight: [],
		hometown: [],
		address: [],
		honestIndex: ['无要求', '需实名', '真诚指数70分及以上', '真诚指数90分及以上', '真诚指数100分及以上', '真诚指数120分及以上', '真诚指数150分及以上',
			'真诚指数200分及以上'
		]

	}
	export default {
		components: {
			pickRegion,
			imgUpload
		},
		mounted() {
			request(url.getSelfInformation, 'GET', {}).then(res => {
				console.log('person', res)
				this.personInfo = res.data
				this.personInfo.headImage = !res.data.headImage ? [] : (typeof res.data.headImage) === 'string' ? [
						res.data.headImage
					] : res
					.data.headImage 
				this.personInfo.hometown = this.personInfo.hometown || '请选择'
				this.personInfo.address = this.personInfo.address || '请选择'
				this.personInfo.sex = this.personInfo.sex === '男' ? 0 : 1
			})
		},
		data() {
			return {
				dateKey: 1,
				token: `Bearer ${uni.getStorageSync('auth')}`,
				uploadUrl: url.upload,
				state: 1,
				personInfo: {
					nickname: '',
					headImage: [],
					city: '',
					county: '',
					province: '',
					sex: 0,
					birthday: 0,
					education: 0,
					constellation: 0, // 星座
					emotion: 0,
					height: '',
					weight: '',
					car: 0,
					house: 0,
					wechatNum: '',
					occupation: '',
					annualIncome: '',
					family: '',
					address: '请选择',
					hobby: '',
					introduction: '',
					defaultRegionCode: '',
					defaultAddressCode: '',
					hometown: '请选择',
					constellationKey: 0,
					age: 0
				},
				local: Object.freeze(local),
			};
		},
		methods: {
			showDesc() {
				uni.showModal({
					title: '提示',
					content: '若您选择公开联系方式，您的心动对象可以直接通过消耗缘分值获取您的联系方式；若您选择隐藏联系方式， 您的心动对象需要向您发送申请查看联系方式请求。 在您通过请求后， 对方可获得您的联系方式， 若您拒绝， 对方将无法获得您的联系方式。',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			uploadSuccess(res) {
				if (res.statusCode === 200) {
					const result = JSON.parse(res.data)
					this.personInfo.headImage.push(result.data)

					console.log(result)
				}
			},
			uploadFail(e) {
				uni.showToast({
					title: '错误',
					text: '上传图片失败'
				})
			},
			imgDelete(e) {
				this.personInfo.headImage = [];
			},
			submit() {
				this.calcAge()
				this.$refs.alertDialog.open();
			},
			// 根据出生年月计算年龄
			calcAge() {
				let date = new Date()
				const y = date.getFullYear()
				const m = date.getMonth() + 1
				console.log('2232323', this.personInfo.birthday)
				const birthY = this.personInfo.birthday?.split('-')[0] || null
				const birthM = this.personInfo.birthday?.split('-')[1] || null
				this.personInfo.age = birthM > m ? y - birthY - 1 : y - birthY
			},
			velidate() {
				if (this.personInfo.nickname.match(/\d/g)) {
					alert('昵称不得包含数字！');
					return false
				} else {
					return true
				}
			},
			dialogConfirm() {
				if (!this.velidate()) {
					return
				}
				request(url.updatePersonInfo, 'post', {
					"address": this.personInfo.address == '请选择' ? '' : this.personInfo.address,
					"age": this.personInfo.age,
					"annualIncome": this.personInfo.annualIncome,
					"car": this.personInfo.car,
					"city": this.personInfo.city,
					"constellation": this.personInfo.constellation,
					"county": this.personInfo.county,
					"education": this.personInfo.education,
					"emotion": this.personInfo.emotion,
					"family": this.personInfo.family,
					"headImage": this.personInfo.headImage?. [0] || '',
					"height": this.personInfo.height,
					"hobby": this.personInfo.hobby,
					"hometown": this.personInfo.hometown == '请选择' ? '' : this.personInfo.hometown,
					"house": this.personInfo.house,
					"introduction": this.personInfo.introduction,
					"nickname": this.personInfo.nickname,
					"province": this.personInfo.province,
					"sex": this.local.sex[this.personInfo.sex],
					"weight": this.personInfo.weight,
					"birthday": this.personInfo.birthday,
					"occupation": this.personInfo.occupation,
					"wechatNum": this.personInfo.wechatNum,
					"requirement": this.personInfo.requirement,
					"publicContact": this.personInfo.publicContact,
					"age": this.personInfo.age
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					} else {
						uni.showToast({
							title: '提交失败，请稍后重试',
							icon: 'error'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'error'
					});
				})
			},
			handleGetRegion(val) {
				this.personInfo.hometown = val.map(item => item?.name).join('-');
			},
			handleGetAddress(val) {
				console.log(val)
				this.personInfo.province = val[0]?.name;
				this.personInfo.city = val[1]?.name;
				this.personInfo.county = val[2]?.name;
				this.personInfo.address = val.map(item => item?.name).join('-');
			},
			selectSex(val) {
				// console.log(val)
				// debugger
				this.personInfo.sex = val.detail.value;
			},
			selectContact(val) {
				this.personInfo.publicContact = val.detail.value;
			},

			// selectRequirement(val) {
			// 	this.personInfo.requirement = local.honestIndex[val.detail.value];
			// },
			selectBirthday(val) {
				this.personInfo.birthday = val.detail.value;
				this.dateKey++
			},
			selectEducation(val) {
				this.personInfo.education = val.detail.value;
			},
			selectConstellation(val) {
				this.personInfo.constellation = this.local.constellation[val.detail.value];
			},
			selectEmotion(val) {
				this.personInfo.emotion = val.detail.value;
			},
			selectCar(val) {
				this.personInfo.car = val.detail.value
			},
			selectChange(val, key) {
				this.personInfo[key] = val.detail.value
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #fff;
		margin-top: 10px;
		padding: 15px 0;

		.submit {
			width: 90%;
			background: #00B7EE;
			font-size: 17px;
			font-family: SimHei;
			color: #FFFFFF;
		}

		.title {
			padding-left: 15px;
			font-size: 13px;
			font-family: SimHei;
			color: #888888;
		}

		.list {
			margin-top: 10px;
		}
	}

	.desc {
		padding: 15px;
		border-top: 1px solid #eeeeee;

		/deep/ .uni-input {
			box-sizing: content-box;
			color: #4D4D4D;
			font-size: 16px;
			text-align: right;
		}

		.textarea {
			border: 1px solid #eeeeee;
			padding: 10px;
			color: #888;
			font-size: 11px;
			margin-top: 10px;
			width: auto;
		}

		span {
			display: flex;
			align-items: center;
		}

		.icon {
			margin-right: 12px;
			width: 19px;
			height: 19px;
		}

		color :#4C4C4C;
		font-size: 16px;
	}

	.select {

		height: 50px;
		padding: 0 15px;

		/deep/ .uni-input {
			box-sizing: content-box;
			color: #4D4D4D;
			font-size: 16px;
			text-align: right;
		}

		color :#4C4C4C;
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top:1px solid #eeeeee;

		span {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.icon {
			margin-right: 12px;
			width: 19px;
			height: 19px;
		}
	}

	.avator {
		height: auto;
	}
</style>
